<template>
  <div class="rightbox" v-cloak>
    <h1>会员需求</h1>
    <el-row  style="width: 96%;margin:2% 2% 10px 2%;">
      <el-col :span="3">
        <el-select v-model="state" placeholder="下发状态"  @change="contentList = []">
          <el-option label="未下发" value="-1"></el-option>
          <el-option label="已下发" value="1"></el-option>
        </el-select>
      </el-col>
      <div :span="4" style="margin-left:10px;width:280px;float:left">
        <el-select v-model="advertId" multiple clearable placeholder="请选择装修公司" style="width:280px">
          <el-option
            v-for="item in advertList"
            :key="item.companyindex"
            :label="item.name"
            :value="item.companyindex">
          </el-option>
        </el-select>
      </div>
      <div style="margin-left:10px;float:left;">
        <el-date-picker
          style="width:150px;"
          v-model="starttime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="开始日期">
        </el-date-picker>
      </div>
      <div style="margin-left:10px;float:left">
        <el-date-picker
          style="width:150px;"
          v-model="endtime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="结束日期">
        </el-date-picker>
      </div>
      <div style="margin-left:10px;float:left">
        <el-button type="primary" @click="Search">查询</el-button>
      </div>
    </el-row>
    <el-table
    :data="contentList"
    height="350"
    border
    style="width: 96%;margin: 5px 2%">
      <el-table-column
        prop="personalusername"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="personaluserphone"
        label="手机号码">
      </el-table-column>
      <el-table-column
        prop="fixareaparam"
        label="房屋面积">
      </el-table-column>
      <el-table-column
        prop="fixmoneyparam"
        label="预算">
      </el-table-column>
      <el-table-column
        prop="fixtimeparam"
        label="装修时间">
      </el-table-column>
      <el-table-column
        prop="talkinfo"
        label="地区">
        <template slot-scope="scope">
          <span>{{scope.row.province}}</span>
          <span>{{scope.row.city}}</span>
          <span>{{scope.row.area}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createtime"
        label="创建时间">
      </el-table-column>
      <el-table-column
        prop=""
        label="状态"
        width="260"
      >
        <template slot-scope="scope">
          <div style="color: #1ea000" v-for="item in scope.row.hasAdvert" :key="item.key">{{item.value}}</div>
          <div style="color: #f00" v-for="item in scope.row.notAdvert" :key="item.key">{{item.value}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        width="100"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" style="margin-left:0;width:100%;color:#1ea000" @click="Downbtn(scope)" v-if="scope.row.notAdvert.length != 0">下发</el-button>
          <el-button v-if="scope.row.caneidt == true" type="text" style="margin-left:0;color:#f00;width:100%;" @click="dontDown(scope)">不下发</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="remarks"
        label="不下发原因">
        <template slot-scope="scope">
          <div v-if="scope.row.remarks == ''">无</div>
          <div v-if="scope.row.remarks != ''" v-for="item in scope.row.revokeAdvert" :key="item.key">{{item.value}}</div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="不下发理由" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="理由" label-width="120">
          <el-input v-model="form.region" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="notDown">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="下发" :visible.sync="dialogFormVisible2">
      <el-form :model="form">
        <el-form-item label="选择装修公司" label-width="120">
          <el-select v-model="form.advertId" multiple clearable placeholder="请选择广告主">
          <el-option
            v-for="item in form.advertList"
            :key="item.key"
            :label="item.value"
            :value="item.key">
          </el-option>
        </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" v-if="form.state == 0" @click="Down">确 定</el-button>
        <el-button type="primary" v-if="form.state == 1" @click="revDown">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      customerId: '',
      customerList: '',
      advertId: [],
      advertList: '',
      contentList: [],
      pagelimit: 5,
      pageindex: 0,
      total: '',
      multipleSelection: [],
      dialindexlist: [],
      templatename: '',
      talkname: '',
      state: '-1',
      starttime: '',
      endtime: '',
      phone: '',
      dialogFormVisible: false,
      dialogFormVisible2: false,
      form: {
        region: '',
        planindex: '',
        advertId: [],
        advertList: [],
        state: ''
      }
    }
  },
  methods: {
    getList: function () {
      var that = this
      that.$axios.request('post', '/Company/Index', {
        all: true,
        state: 1
      })
        .then((res) => {
          if (res.code === 0) {
            that.advertList = res.data.datalist
          }
        })
    },
    Search: function () {
      var that = this
      that.$axios.request('post', '/Plan/Index', {
        Companyindex: that.advertId.join(','),
        Name: that.customerId,
        Phone: '',
        StartTime: that.starttime,
        EndTime: that.endtime,
        state: that.state
      })
        .then((res) => {
          if (res.code === 0) {
            that.contentList = res.data.datalist
          }
        })
    },
    dontDown: function (scope) {
      var that = this
      that.form.dialindex = scope.row.dialindex
      that.dialogFormVisible = true
    },
    notDown: function () {
      var that = this
      if (that.form.region === '') {
        that.$pub.messageTwo('理由不能为空', '提示')
      } else {
        that.$axios.request('post', '/Dial/NotShow', {
          dialindex: that.form.dialindex,
          remarks: that.form.region
        })
          .then((res) => {
            if (res.code === 0) {
              that.dialogFormVisible = false
              that.$pub.messageTwo('操作成功', '提示')
              that.Search()
            }
          })
      }
    },
    Downbtn: function (scope) {
      var that = this
      that.form.advertList = []
      // that.form.advertList = scope.row.notAdvert.concat(scope.row.revokeAdvert)
      that.form.advertList = scope.row.notAdvert
      that.form.planindex = scope.row.planindex
      that.form.state = 0
      that.dialogFormVisible2 = true
    },
    Down: function () {
      var that = this
      if (that.form.advertId.length === 0) {
        that.$pub.messageTwo('广告主不能为空', '提示')
      } else {
        that.$axios.request('post', '/Plan/SetShow', {
          Companyindex: that.form.advertId,
          Planindex: that.form.planindex
        })
          .then((res) => {
            if (res.code === 0) {
              that.dialogFormVisible2 = false
              that.$pub.messageTwo('下发成功', '提示')
              that.form.advertList = []
              that.form.advertId = []
              that.Search()
            }
          })
      }
    }
  },
  mounted () {
    this.getList()
    const date = new Date()
    this.starttime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
    this.endtime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
  }
}
</script>
